import React, { Component } from 'react'
import Han from "../../components"
import CitySelect from 'react-city-choose'
const {Header,Button} = Han


export default class Store extends Component {
    state={
        city:"",
        area:"",
        list:[],
        isSearch:false
    }
    // 门店搜索
    search = ()=>{

        const {city,area} = this.state
        const {$httpReq,$api} = this;
        if(city==='') return alert('城市不能为空') 

        $httpReq($api.SHOP_SEARCH({city,area}),res=>this.setState({list:res.data,isSearch:true}))
    }
    // 跳转预约购买
    JumpBuy = item =>{
        localStorage.shopID = item.shopID;
        this.props.history.push({pathname:'/detailmap',state:item})
    }

    render() {
       const {list,isSearch} = this.state
        return (
            <div className="shop">
                <Header title="口罩门店预约" path="/home"/>
                <div className="bg_blue">
                    <div className="search">
                        <h3>口罩门店查询</h3>
                        
                        <CitySelect onOk={(city,area)=>this.setState({city,area})} />

                        <div className="m_t">
                            <Button text="查询" Radius submit={()=>this.search()} />
                        </div>
                       
                    </div>
                </div>
                {/* 列表 */}
                <div className="shop_list">
                    {
                        list.length?<div className="tips">已为您找到以下城市</div>:null
                    }   
                    {
                        list.map(item=>{
                            return <div className="shop_list_out" key={item.shopID}>
                                <div className="shop_name shop_title" >{item.shopName}</div>
                                <div className="shop_name">
                                {
                                    Array.from(new Array(5).keys()).map(jtem=><span key={jtem} className={["iconfont",item.star>jtem?"icon-favorites-fill":"icon-favorites"].join(' ')}></span>)
                                }
                                </div>
                                <div className="shop_name" >{item.address}</div>
                                <div className="shop_btn" onClick={()=>this.JumpBuy(item)}>预约购买</div>
                            </div>
                        })
                    }
                    {
                        list.length?null:<div className="tips">{isSearch?'您所查询的地区还未开放口罩线上预约哦！':'请选择要查询的城市地区进行门店搜索'}</div>
                    }
                </div>
                   
            </div>
        )
    }
   
}
